<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
    <div class="container-div">
		<div class="col-sm-12 search-collapse">
			<form id="brandCategory-form">
				<div class="select-list">
					<ul>
						<li>
							品牌：<select name="fbrand" id="fBrand">
							<option value="">所有</option>
							<option th:each="brand : ${brands}" th:text="${brand}" th:value="${brand}"></option>
						</select>
						</li>
						<li>
							类型：<input type="text" id="fcategory" name="fcategory"/>
							</select>
						</li>
						<li>
							ean：<input type="text" id="fproductean" name="fproductEan"/>
							</select>
						</li>
						<li>
							商品名称：<input type="text" id="fproductname" name="fproductname"/>
							</select>
						</li>
						<li class="select-time">
							<label>抓取时间： </label>
							<input type="text" class="time-input" id="startTime" value="" placeholder="" name="fdate"/>
							<!--<span>-</span>-->
							<input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]" style="display: none"/>
						</li>
						<li>
							<!--<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>-->
							<a class="btn btn-primary btn-rounded btn-sm" onclick="doSearch()"><i class="fa fa-search"></i>&nbsp;搜索</a>
							<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
							<a class="btn btn-success btn-rounded btn-sm" onclick="switchTo()"><i class="glyphicon glyphicon-sort"></i>&nbsp;切换类型</a>
						</li>
					</ul>
				</div>
			</form>

		</div>

		<div class="col-sm-12 select-table table-striped" style="min-height:85%;background-color: #1086141a" id="echarts_table">
			<table id="bootstrap-table" data-mobile-responsive="true"></table>
		</div>
    </div>
    <div th:include="include :: footer"></div>
	<script th:src="@{/ajax/libs/echarts/echarts.js}"></script>
	<script th:src="@{/ruoyi/js/toChartsJson.js}"></script>
    <script th:inline="javascript">
        var prefix = ctx + "firststage/followSellProduct";
        var myChart;
        var returnData;//后台返回的数据
        var pageForm;//页面形态(图表：'chart',报表：'table')
        var queryParams_;//搜索参数


		//初始化图表
        $(function() {
            $.ajax({
                url:prefix+"/list",
                type:'post',
                data:{
                    fdate:today(),
                },
                dataType:'json',
                success:function (data) {
                    createCharts(data.rows);
                },error:function () {
                    console.log('error!');
                },beforeSend:function () {
                    //设置抓取时间为当前日期前一天
                    $("#startTime").val(today());

                    $.modal.loading("数据加载中，请稍后...");
                },complete: function (data) {
                    // layer.close(loadIndex);
                    $.modal.closeLoading();
                }
            })
        });



        //搜素
        function doSearch() {
            //抓取时间为空不能搜索
            if(chooseDateNotNull()!=true){
                $.modal.alertWarning(chooseDateNotNull());
                return false;
            }

            var fbrand = $("#fbrand").val();//品牌
            var fcategory = $("#fcategory").val();//类型
            var fproductean = $("#fproductean").val();//ean
            var fproductname = $("#fproductname").val();//商品名称
            var fdate = $("#startTime").val();//日期
            var fdate = $("#endTime").val();//日期
            queryParams_ = {
                fbrand:fbrand,
                fcategory:fcategory,
                fproductean:fproductean,
                fproductname:fproductname,
                fdate:fdate,
            }
            if(pageForm=='table'){
                //销毁原表格,否则不会重新从后台再次查询数据
                // $("#bootstrap-table").bootstrapTable('destroy');
                $.table.search();
            }else {
                myChart.dispose();
                $.ajax({
                    url:prefix+"/list",
                    type:'post',
                    dataType:'json',
                    data:queryParams_,
                    success:function (data) {
                        returnData = data.rows;
                        createCharts(returnData);
                    },error:function () {
                        console.log('error!');
                    }
                })
            }

        }


        //切换图表报表
        function switchTo() {
            //抓取时间为空不能切换
            if(chooseDateNotNull()!=true){
                $.modal.alertWarning(chooseDateNotNull());
                return false;
            }

            if (pageForm == 'chart') {//判断是否为报表，是则切换图表，否则切换报表
                myChart.dispose();//释放图表，摧毁对象
                // $("#echarts_table").empty();
                $("#echarts_table").css("user-select","auto");//修改从图表切换过来不能复制问题
                $("#echarts_table").append("<table id=\"bootstrap-table\" data-mobile-responsive=\"true\" ></table>");
                createTable();
            } else {
                createCharts(returnData);
            }
        }

//-----------------------------------------------------charts and table --------------------------------------------------
        //图表
		function createCharts(returnJson) {
            var chartJson = followSellProductToChartJson(returnJson);
            myChart = echarts.init(document.getElementById('echarts_table'));
            var option = {
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: '97%',
                    top: 'center',
                    feature: {
                        mark: {show: true},
                        // dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },

                dataZoom:[
                    {
                        show: true,
                        startValue: 0,
                        endValue: 4
                    }
                ],
                legend: {
                    data:['库存','价格','评论数','星星','一星数','二星数','三星数','四星数','五星数']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : chartJson.titleJson,//['SKU1','SKU2','SKU3','SKU4','SKU5','SKU6','SKU7','SKU8']
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'库存',
                        type:'bar',
                        data:chartJson.inventoryJson//[320, 332, 301, 334, 390, 330, 320,350],
                    },
                    {
                        name:'价格',
                        type:'bar',
                        data:chartJson.nearestPriceJson,//[120, 132, 101, 134, 90, 230, 210,240]
                    },
                    {
                        name:'评论数',
                        type:'bar',
                        data:chartJson.nearestCommentsJson//[220, 182, 191, 234, 290, 330, 310,340]
                    },
                    {
                        name:'星星',
                        type:'bar',
                        data:chartJson.nearestStarJson//[150, 232, 201, 154, 190, 330, 410,440]
                    },
                    {
                        name:'一星数',
                        type:'bar',
                        stack:'总星星数',
                        data:chartJson.nearestOneStarAmountJson//[862, 1018, 964, 1026, 1679, 1600, 1570,1610],
                    },
                    {
                        name:'二星数',
                        type:'bar',
                        barWidth : 5,
                        stack:'总星星数',
                        data:chartJson.nearestTwoStarAmountJson//[620, 732, 701, 734, 1090, 1130, 1120,1150]
                    },
                    {
                        name:'三星数',
                        type:'bar',
                        stack:'总星星数',
                        data:chartJson.nearestThreeStarAmountJson,//[120, 132, 101, 134, 290, 230, 220,250]
                    },
                    {
                        name:'四星数',
                        type:'bar',
                        stack:'总星星数',
                        data:chartJson.nearestFourStarAmountJson//[60, 72, 71, 74, 190, 130, 110,140]
                    },
                    {
                        name:'五星数',
                        type:'bar',
                        stack:'总星星数',
                        data:chartJson.nearestFiveStarAmountJson//[62, 82, 91, 84, 109, 110, 120,150]
                    }
                ]
            };
            ;
            pageForm = 'chart';
            myChart.setOption(option);
        }


        //表格
        function createTable() {
            pageForm = 'table';
            var options = {
                url: prefix + "/list",
                modalName: "跟卖商品",
                queryParams:queryParams,
                striped:true,
                search: false,
                showRefresh:false,
                columns: [
                    {
                        field : 'fproductname',
                        title : '商品名称',
                        sortable:true,
                    },
                    {
                        field : 'fproductsku',
                        title : 'sku',
                        sortable:true,
                    },
                    {
                        field : 'fproductean',
                        title : 'ean',
                        sortable:true,
                    },
                    {
                        field : 'fproductprice',
                        title : '价格',
                        sortable:true,
                    },
                    {
                        field : 'fissouq',
                        title : '官方仓',
						formatter:function (value, row, index) {
                            if(value == 1){
                                return '是';
                            }else if (value == 0){
                                return '否';
                            }
                        },
                        sortable:true,
                    },
                    {
                        field : 'finventory',
                        title : '库存',
                        sortable:true,
                    },
                    /*{
                        field : 'finventorychange',
                        title : '库存变化',
                        sortable:true,
                    },*/
                    {
                        field : 'fbrand',
                        title : '品牌',
                        sortable:true,
                    },
                    {
                        field : 'fcategory',
                        title : '类型',
                        sortable:true,
                    },
                    {
                        field : 'fstar',
                        title : '星星',
                        sortable:true,
                    },
                    {
                        field : 'fonestaramount',
                        title : '一星数',
                        sortable:true,
                    },
                    {
                        field : 'ftwostaramount',
                        title : '二星数',
                        sortable:true,
                    },
                    {
                        field : 'fthreestaramount',
                        title : '三星数',
                        sortable:true,
                    },
                    {
                        field : 'ffourstaramount',
                        title : '四星数',
                        sortable:true,
                    },
                    {
                        field : 'ffivestaramount',
                        title : '五星数',
                        sortable:true,
                    },
                    {
                        field : 'fcommentamount',
                        title : '评论数',
                        sortable:true,
                    }],
                onLoadSuccess: function (item, $element) {
                    returnData = $('#bootstrap-table').bootstrapTable('getData');//表格所有数据
                },
            };
            $.table.init(options);
        }


        //查询参数
        function queryParams(params) {
            return {
                fbrand:         $("#fbrand").val(),//品牌
                fcategory:      $("#fcategory").val(),//类型
                fproductean:    $("#fproductean").val(),//ean
                fproductname:   $("#fproductname").val(),//商品名称
                fdate:           $("#startTime").val(),//日期
                pageSize:       params.limit,
                pageNum:        params.offset / params.limit + 1,
                searchValue:    params.search,
                orderByColumn:  params.sort,
                isAsc:          params.order
            };
        }
    </script>
</body>
</html>